<!DOCTYPE html>
<html lang="zh-hans">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">

    <title>Robam Cooker</title>
    <link href="../lib/font/material-icons.css?family=Material+Icons" rel="stylesheet" type="text/css">
    <link href="../lib/css/animate.css" rel="stylesheet">
    <link href="../lib/css/quasar.css" rel="stylesheet" type="text/css">
    <style>
      /* 合并单元格的样式微调 */
      .q-table thead tr {
        height: 28px!important
      }
      .q-table thead tr th:nth-child(n+2) {
        border-left: 1px solid rgba(0,0,0,0.12)
      }
      .q-table thead tr th[colspan] {
        border-bottom: 1px solid rgba(0,0,0,0.12);
      }
      .q-table thead tr th[rowspan] {
        vertical-align: middle
      }
      .q-table thead tr .td-has-rowspan {text-align: center;color: rgba(0,0,0,0.54);font-weight: 500;font-size: 12px;}
      /* fixed: overflow时y轴方向传滚动条 */
      .scroll {
        overflow-x: auto;
        overflow-y: hidden
      }
    </style>
  </head>
  <body>
    <div id="q-app" style="padding: 10px">
      <q-table
        dense
        row-key="id"
        separator="cell"
        :data="data"
        :columns="columns"
        selection="multiple"
        :selected.sync="selected"
        :rows-per-page-options="[5, 10, 20]"
        :pagination.sync="serverPagination"
        @request="listGet"
			>
        <div slot="header" slot-scope="props" style="display: contents">
          <q-tr :props="props">
            <q-th auto-width rowspan="2" style="border-top:none">
              <q-checkbox
                class="absolute-center"
                v-if="props.multipleSelect"
                v-model="props.selected"
                indeterminate-value="some"
              ></q-checkbox>
            </q-th>
            <q-th rowspan="2" key="title" :props="props">询价主题</q-th>
            <q-th rowspan="2" key="code" :props="props">RFQ编码</q-th>
            <q-th rowspan="2" key="isSignUp" :props="props">是否需要报名</q-th>
            <q-th colspan="3" class="td-has-rowspan">采购组</q-th>
          </q-tr>
          <q-tr :props="props">
            <q-th key="purGroupName" :props="props">采购组名称</q-th>
            <q-th key="purGroupCode" :props="props">采购组编码</q-th>
          </q-tr>
        </div>
        <q-tr slot="body" slot-scope="props" :props="props">
          <q-td auto-width>
            <q-checkbox color="primary" v-model="props.selected"></q-checkbox>
          </q-td>
          <q-td v-for="col in props.cols" :key="col.name" :props="props">
            {{ props.row[col.name] }}
          </q-td>
        </q-tr>
        <div slot="pagination" slot-scope="props" class="row flex-center q-py-sm">
          第
          <q-pagination
            class="q-mt-xs"
            v-model="serverPagination.page"
            input
            boundary-links
            direction-links
            :max-pages="5"
            :ellipses="true"
            :max="pages"></q-pagination>
          页 &nbsp; 共 {{ total }} 条
        </div>
      </q-table>
    </div>

    <!-- quasar and vue dep -->
    <script src="../lib/js/quasar.ie.polyfills.umd.min.js"></script>
    <script src="../lib/js/vue.js"></script>
    <script src="../lib/js/quasar.js"></script>
    <script src="../lib/js/i18n.zh-hans.umd.min.js"></script>
    <!-- vue validate -->
    <script src="../lib/js/vuelidate.min.js"></script>
    <script src="../lib/js/validators.min.js"></script>
    <!-- consts and utils -->
    <script src="../script/consts.js"></script>
    <script src="../script/utils.js"></script>
    <!-- qs for axios -->
    <script src="../lib/js/qs.min.js"></script>
    <!-- axios for http request -->
    <script src="../lib/js/axios.js"></script>
    <!-- axios.instance must be after axios -->
    <script src="../script/axios.instance.js"></script>
    <!-- vue-i18n for application's internationalization -->
    <script src="../lib/js/vue-i18n.js"></script>
    <!-- current page international file -->
    <script src="../lang/index.js"></script>
    <!-- 本地组件 -->

    <script>
      Quasar.i18n.set(Quasar.i18n.zhHans)
      Vue.use(window.vuelidate.default)
      console.log(Quasar.utils.uid());
      new Vue({
        el: '#q-app',
        i18n: i18n,
        data: function () {
          return {
            version: Quasar.version,
            data: [],
            total: 0,
            serverPagination: {
              page: 1,
              rowsPerPage: 10,
              rowsNumber: 10
            },
						columns: [
              {
                name: 'title',
                align: 'center',
                label: '询价主题',
                field: 'title'
              },
              {
                name: 'code',
                align: 'center',
                label: 'RFQ编码',
                field: 'code',
                sortable: true
              },
              {
                name: 'isSignUp',
                align: 'center',
                label: '是否需要报名',
                field: 'isSignUp',
                sortable: true
              },
              {
                name: 'purGroupName',
                align: 'center',
                label: '采购组名称',
                field: 'purGroupName'
              },
              {
                name: 'purGroupCode',
                align: 'center',
                label: '采购组编码',
                field: 'purGroupCode',
                sortable: true
              }
            ],
            selected: [],
            fixedCols: ['isSignUp']
          }
        },
        computed: {
          pages: function() {
            return Math.ceil(this.total/this.serverPagination.rowsPerPage)
          }
        },
        watch: {
          'serverPagination.page': function (page) {
            this.listGet({ pagination: this.serverPagination })
          },
          selected: function(selected) {
            console.log(selected, 'selected')
          },
          // data: function(data) {
          //   var that = this
          //   this.$nextTick(function() {
          //     var fixedArr = [], unfixedArr = []
          //     that.fixedCols.forEach(function(fixedCol) {
          //       that.columns.forEach(function(col) {
          //         if (fixedCol === col.name) {
          //           fixedArr.push(col)
          //         } else {
          //           unfixedArr.push(col)
          //         }
          //       })
          //     })
          //     // console.log(fixedArr.concat(unfixedArr));
          //     that.columns = fixedArr.concat(unfixedArr)
          //     console.log(that.columns);
          //   })
          // }
        },
        created: function() {
          this.listGet({ pagination: this.serverPagination })
        },
        methods: {
          listGet: function(arg) {
            this.serverPagination = arg.pagination
            var that = this
            this.$api({
              method: 'post',
              url: '/manager/rfq/main/query',
              params: {
                page: this.serverPagination.page,
                rows: this.serverPagination.rowsPerPage,
                sort: this.serverPagination.sortBy,
                order: this.serverPagination.descending == true? 'desc' : (this.serverPagination.descending == false? 'asc' : null),
              },
              emulateQS: true,
              successCallback: function(data) {
                that.data = data.rows
                that.total = data.total
              },
              errorCallback (err) {
                console.log(err)
              }
            })
          }
        }
      })
    </script>
  </body>
</html>
